昨天才決定參加鐵人賽，今天就感冒了。
頭昏腦脹，看診還等了快兩個小時 @@
難道這就能順水推舟直接斷賽了嗎 ☆▽☆
回到家發現還有點時間，就再擠一篇吧！

這篇算是留給我自己看的，因為我是非常注重分門別類的人，每支檔案都要依照它的功能分類好放在不同的資料夾，才能讓人安心。好的檔案目錄架構的設計也有助於維護性，未來其他工程師接手此專案，也能依照類別與命名找到相對應的功能位置！

由於之前寫 Vue，一開始也會以 Vue 的概念搬過去，算是過渡期，但對專案開發也是不小的幫助喔！

Angular 檔案目錄架構範本：

my-angular-project/
├── src/
│   ├── index.html               # Vite 入口 HTML
│   ├── main.ts                  # 入口檔案
│   ├── styles.scss
│   │
│   ├── app/
│   │   ├── app.component.ts         # 主元件 (替代 App.vue)
│   │   ├── app.config.ts            # Providers 全域設定 (替代 providers/)
│   │   ├── app.routes.ts            # 主路由配置 (替代 router/)
│   │   │
│   │   ├── core/                    # ⭐ 全域單例資源 (Core Module / Singleton Services)
│   │   │   ├── guards/              # 路由守衛 (auth.guard.ts, role.guard.ts)
│   │   │   ├── interceptors/        # HTTP 攔截器 (auth.interceptor.ts - 代替 axios instance)
│   │   │   ├── services/             # 全域 Service (AuthService, ThemeService)
│   │   │   └── types/               # 全域核心 Data Models / Types
│   │   │
│   │   ├── layouts/ 
│   │   │   ├── admin/
│   │   │   ├── auth/
│   │   │   └── default/
│   │   │
│   │   ├── features/                # ⭐ 功能模組切分 (原 Vue 的 modules/)
│   │   │   ├── auth/                # 登入 / 註冊 / 權限
│   │   │   │   ├── components/      # Auth 專用元件 (如 LoginForm)
│   │   │   │   ├── pages/           # Auth 頁面 (Login, Register - 替代 views)
│   │   │   │   │   └── login/
│   │   │   │   │   │   ├── login.component.ts
│   │   │   │   │   │   ├── login.component.html
│   │   │   │   │   │   ├── login.component.scss
│   │   │   │   │   │   └── login.spec.ts          # 單元測試：就近跟隨檔案放置
│   │   │   │   ├── services/        # Auth 專用 API / Logic
│   │   │   │   ├── auth.routes.ts   # 區域路由 (Lazy Loading)
│   │   │   │   └── types/           # Auth 專用型別
│   │   │   │
│   │   │   ├── frontend/            # 前台功能模組
│   │   │   │   ├── components/
│   │   │   │   ├── pages/
│   │   │   │   ├── services/
│   │   │   │   └── frontend.routes.ts
│   │   │   │
│   │   │   └── admin/               # 後台功能模組
│   │   │       ├── components/
│   │   │       ├── pages/
│   │   │       ├── layouts/         # 後台專屬 Layout (側邊欄、Header)
│   │   │       ├── services/
│   │   │       └── admin.routes.ts
│   │   │
│   │   └── shared/                  # ⭐ 可跨模組複用的 UI & 工具 (Shared)
│   │       ├── components/          # 通用元件 (Button, Modal, Card)
│   │       ├── directives/          # Angular 指令 (如 v-has-permission)
│   │       ├── pipes/               # 管道 (資料格式化，如 DateFormatPipe)
│   │       ├── utils/               # 純 Helper 函式
│   │       └── constants/           # 常數
│   │
│   ├── assets/                      # 靜態資源 (images, icons, i18n JSON)
│   ├── styles/                      # Tailwind config 及全域樣式
│   │   ├── base/                    # 基礎樣式
│   │   ├── components/              # 元件樣式
│   │   ├── layout/                  # 版面配置樣式
│   │   ├── pages/                   # 頁面樣式
│   │   ├── themes/                  # 主題樣式
│   │   ├── utils/                   # 工具樣式
│   │   ├── vendors/                 # 第三方樣式
│   │   └── main.scss                # 全域入口樣式
│   └── tests/                       # 單元測試 (建議放 src 內)
│       ├── unit/                    # 各模組測試
│       │   ├── auth/
│       │   ├── frontend/
│       │   └── shared/
│       └── setup.ts                 # 測試初始化
│
├── cypress/                         # E2E 測試 (建議放父層)
│   ├── e2e/                         # 前台 / 後台 / auth 測試案例
│   ├── fixtures/                    # 測試假資料
│   └── support/                     # 測試支援程式
│
├── docs/
│   └── structure.txt                # 專案結構說明
│
├── public/                          # 靜態根目錄資源
├── .editorconfig                     # 編輯器統一設定
├── .gitignore                       # Git 忽略檔案設定
├── .prettierrc.ts                   # Prettier 設定
├── angular.json                     # Angular CLI 核心配置檔
├── package-lock.json                # 套件版本鎖定
├── package.json                     # 專案依賴與 npm scripts
├── README.md                        # 專案說明文件
├── tsconfig.json                    # TypeScript 配置檔
├── tailwind.config.js               # Tailwind 設定檔
└── eslint.config.js                 # ESLint 設定